<!DOCTYPE html>
<html style="height: 100%;width:100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; width:100%">
		<div id="chart-panel" style="height: 100%;width: 100%"></div>
		<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

		<script type="text/javascript">
			var dom = document.getElementById("chart-panel");
			var myChart = echarts.init(dom);
			var option;
			var app = {};
			let value = 40;
			let name = '统计';
			option = {
				backgroundColor: '#061740',
				title: {
					// text: '{a|' + value + '}{c|%}',
					text: '{a|' + value + '%}{c|\n' + name + '}',
					x: 'center',
					y: 'center',
					textStyle: {
						rich: {
							a: {
								fontSize: 48,
								color: '#29EEF3',
							},

							c: {
								fontSize: 20,
								color: '#fff',
								// padding: [5,0]
							},
						},
					},
				},
				series: [{
						type: 'pie',
						name: '外圆环',
						radius: ['61%', '63%'],
						hoverAnimation: false,
						clockWise: false,
						itemStyle: {
							normal: {
								color: '#304867',
							},
						},
						label: {
							show: false,
						},
						data: [100],
					},
					{
						name: '吃猪肉频率',
						type: 'pie',
						radius: ['58%', '45%'],
						silent: true,
						clockwise: true,
						startAngle: 90,
						z: 0,
						zlevel: 0,
						label: {
							normal: {
								position: 'center',
							},
						},
						data: [{
								value: value,
								name: '',
								itemStyle: {
									normal: {
										color: 'red',
									},
								},
							},
							{
								value: 100 - value,
								name: '',
								label: {
									normal: {
										show: false,
									},
								},
								itemStyle: {
									normal: {
										color: '#173164',
									},
								},
							},
						],
					},
					{
						name: '',
						type: 'gauge',
						radius: '58%',
						center: ['50%', '50%'],
						startAngle: 0,
						endAngle: 359.9,
						splitNumber: 60,
						hoverAnimation: true,
						axisTick: {
							show: false,
						},
						splitLine: {
							length: 60,
							lineStyle: {
								width: 5,
								color: '#061740',
							},
						},
						axisLabel: {
							show: false,
						},
						pointer: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								opacity: 0,
							},
						},
						detail: {
							show: false,
						},
						data: [{
							value: 0,
							name: '',
						}, ],
					},
					{
						type: 'pie',
						name: '内环',
						radius: ['40%', '42%'],
						hoverAnimation: false,
						clockWise: false,
						itemStyle: {
							normal: {
								color: '#304867',
							},
						},
						label: {
							show: false,
						},
						data: [100],
					},
				],
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
		</script>
	</body>
</html>
